<template>
  <div ref="dotLineChart" style="height: 100%" />
</template>

<script>
import * as echarts from 'echarts';
// const echarts = require('echarts/lib/echarts');
// require('echarts/lib/chart/bar');
// require('echarts/lib/chart/line');
// require('echarts/lib/component/tooltip');
// require('echarts/lib/component/markPoint');
// require('echarts/lib/component/title');
// require('echarts/lib/component/axisPointer');
export default {
  name: 'DafosiControlWebDotLineChart',

  props: {
    data: {
      type: Array,
      default: () => []
    },
    unit: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      chart: null,
      option: null
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      const light_dot = require('../../../assets/img/decisionAnalysis/light_dot.png');
      this.chart = echarts.init(this.$refs.dotLineChart);
      // 传入数据生成 option
      this.option = {
        tooltip: {
          show: true
        },
        xAxis: {
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: '#A2A7BA',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: '#A2A7BA'
            }
          },
          data: this.data.map((item) => item.x)
        },
        yAxis: [
          {
            name: this.unit,
            nameTextStyle: {
              color: '#A2A7BA',
              fontSize: 12 * (window.ratio || 1)
            },
            type: 'value',
            position: 'left',
            // max: 8,
            interval: 1,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#A2A7BA',
                fontSize: 12 * (window.ratio || 1)
              }
            },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false }
          }
        ],
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: 32,
          containLabel: true
        },

        series: [
          {
            type: 'bar',
            barWidth: 4,
            label: {
              show: true,
              formatter: '{a|}',
              // color: '#fff',
              position: 'top',
              distance: -10,
              // backgroundColor: '#142B45',
              // shadowColor: '#fff',
              // shadowBlur: 10,
              // padding: 4,
              // borderRadius: 8,
              rich: {
                a: {
                  width: 26,
                  height: 26,
                  backgroundColor: {
                    image: light_dot
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#53F1F4' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#10344E' // 100% 处的颜色
                    }
                  ]
                }
              }
            },

            data: this.data.map((item) => item.y)
          }
        ]
      };
      this.chart.setOption(this.option);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
